<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://jakarta.apache.org/taglibs/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><c:out value='${context.my_account }' />-<c:out
	value='${context.title }' /></title>
<script language="javascript" type="text/javascript" src="/group/ui-component/avatar/js/drag.js"></script>
<script language="javascript" type="text/javascript"
	src="/group/ui-component/avatar/js/ImageCopper.js"></script>
 
<script type="text/javascript">
	//校验上传文件
	function checkPic() {

		var location = document.getElementById('pic').value;
		if (location == "") {
			alert("${context.msg_image_selection}");
			return false;
		}
		var point = location.lastIndexOf(".");
		var type = location.substr(point);
		if (type == ".jpg" || type == ".gif" || type == ".JPG"
				|| type == ".GIF") {
			img = document.createElement("img");
			img.src = location;
			if (img.fileSize > 1024000) {
				alert("${context.msg_image_size}");
				return false;
			} else
				return true;
		} else {
			alert("${context.msg_image_format}");
			return false;
		}
		return true;

	}
	//图片上传后的回调函数
	function callback(url, width, height) {
	 
		//document.getElementById('cut_img').width = width;
		//document.getElementById('cut_img').height = height;
		document.getElementById('cut_img').src = url + "?"
				+ Math.round(Math.random() * 10000);
		document.getElementById('cut_url').value = url;
		document.getElementById('hide').style.display = '';
		imageinit();
		gripinit();
	}

	function hide(){
		document.getElementById('hide').style.display='none';
		}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
</head>

<body  >
<form name="picForm" id="picForm" action="/group/uploadAvatar.action?cmd=uploadAvatar"  method="post"
	enctype="multipart/form-data" onsubmit="return checkPic();"
	 >

<div><table><tr><td><input type="file" name="file" size="25" id="pic" onchange="" /></td><td>
<input type="submit" style="cursor:pointer;border:1px solid #C5B1D8; " value="${context.upload_avatar}" /> </td></tr></table><iframe name='hidden_frame'
	id="hidden_frame" style='display: none'></iframe></div>

</form>



<form name="imgForm" id="imgForm" action="/group/cutAvatar.action" target=_parent method="post"
	onsubmit="return getcutpos();">

<div id="hide" style="display: ">
<div id="cut_div"
	style="align:center;border: 2px solid #888888; width: 284px; height: 300px; overflow: hidden; position: relative; top: 0px; left: 0px; margin: 4px; cursor: pointer;">
<table
	style="border-collapse: collapse; z-index: 10; filter: alpha(opacity =       75); position: relative; left: 0px; top: 0px; width: 284px; height: 266px; opacity: 0.75;"
	cellspacing="0" cellpadding="0" border="0" unselectable="on">
	<tr>
		<td style="background: #cccccc; height: 40px;" colspan="3"></td>
	</tr>
	<tr>
		<td style="background: #cccccc; width: 82px;"></td>
		<td style="border: 1px solid red; width: 200px; height: 200px;"></td>
		<td style="background: #cccccc; width: 82px;"></td>
	</tr>
	<tr>
		<td style="background: #cccccc; height: 60px;" colspan="3"></td>
	</tr>
</table>
<img  id="cut_img" style="align:center;position: relative; top:-235px;margin-top: -25px; left:60px"
	  /></div>
<table cellspacing="0" cellpadding="0">
	<tr>
		<td><img style="margin-top: 5px; cursor: pointer;"
			src="/group/ui-component/avatar/images/_h.gif" alt="${context.zoom_in}" onmouseover="this.src='/group/ui-component/avatar/images/_c.gif'"
			onmouseout="this.src='/group/ui-component/avatar/images/_h.gif'" onclick="imageresize(false)" /></td>
		<td><img id="img_track"
			style="width: 250px; height: 18px; margin-top: 5px"
			src="/group/ui-component/avatar/track.gif" /></td>
		<td><img style="margin-top: 5px; cursor: pointer;"
			src="/group/ui-component/avatar/images/h.gif" alt="${context.zoom_out}" onmouseover="this.src='/group/ui-component/avatar/images/c.gif'"
			onmouseout="this.src='/group/ui-component/avatar/images/h.gif'" onclick="imageresize(true)" /></td>
	</tr>
</table>
<img id="img_grip"
	style="position: absolute; z-index: 100; left: -1000px; top: -1000px; cursor: pointer;"
	src="/group/ui-component/avatar/images/grip.gif" />
<div style="padding-top: 15px; padding-left: 5px;"><input
	type="hidden" name="cut_pos" id="cut_pos" value="" /> <input type="hidden"
	name="cut_url" id="cut_url" value="" /> <input type="submit" style="cursor:pointer;border:1px solid #C5B1D8;"
	class="button" name="submit" id="submit" value=" ${context.save_avatar} " /></div>
</div>
</form>

<c:if test="${not empty session_user && not empty session_user.avatar &&fn:indexOf(session_user.avatar ,'upload')!=-1 }">	
<script>callback('${session_user.avatar}','200','200');  </script>
</c:if>


</body>
</html>